.client-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  width: 1000px;
  height: 740px;
  background-color: rgb(238, 238, 238);
  border-radius: 5px;
  display: flex;
  z-index: 2;
}

.main .left {
  width: 280px;
  height: 100%;
  background-color: rgb(46, 50, 56);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.main .right {
  width: 720px;
  height: 100%;
  padding: 0 20px;
}

.cover {
  width: 100%;
  height: 100%;
  background-image: url(../css/bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  /* 滤镜 */
  filter: blur(20px);
}

.main .left .user {
  height: 80px;
  font-size: 20px;
  line-height: 80px;
  color: white;
  padding: 0 20px;
}

/* 用户列表样式 */
.user-list {
  list-style-type: none;
  padding: 0;

}

/* 用户项样式 */
.user-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  /* border-bottom: 1px solid #eee; */
}

/* 头像样式，修改为正方形 */
.user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 8px;
  background-color: #eee;
  object-fit: cover;
  /* 保证图片填满容器 */
}


#session-list li .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 8px;
  background-color: #eee;
  object-fit: cover;
  /* 保证图片填满容器 */
}

/* 用户名样式 */
.username {
  height: 80px;
  font-size: 20px;
  line-height: 80px;
  color: white;
  padding: 0 20px;
}

.main .left .search {
  height: 40px;
  padding: 0 20px;

  display: flex;
  justify-items: center;
  align-items: center;
}

.main .left .search input {
  height: 34px;
  width: 200px;
  line-height: 34px;
  font-size: 14px;
  color: white;
  background-color: rgb(38, 41, 46);

  border: none;
  outline: none;

  padding-left: 10px;
  border-radius: 5px;
}

.main .left .search button {
  height: 34px;
  width: 34px;
  border: none;
  outline: none;

  background-color: rgb(38, 41, 46);

  border-radius: 5px;
  background-image: url(../image/搜索.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: center center;
}

.main .left .search button:active {
  background-color: gray;
}

.main .left .tab {
  height: 50px;
  display: flex;
  align-items: center;
}

.main .left .tab .tab-session {
  height: 100%;
  width: 50%;
  background-image: url(../image/对话.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center center;
}

.main .left .tab .tab-friend {
  height: 100%;
  width: 50%;
  background-image: url(../image/用户2.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center center;
}

.main .left .list {
  height: 570px;
  overflow: auto;
}

.main .left #session-list li {
  height: 60px;
  padding: 10px 20px;
  color: white;
  border-top: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* 子元素左对齐 */

}

.main .left .list li {
  height: 60px;
  padding: 10px 20px;
  color: white;
  border-top: 1px solid black;
  display: flex;
  align-items: center;
}

.main .left .list li .avatar {
  width: 40px;
  /* 设置头像宽度 */
  height: 40px;
  /* 设置头像高度 */
  border-radius: 50%;
  /* 使头像呈圆形，可按需调整 */
  margin-right: 10px;
  /* 头像与文字间的间距 */
}

.main .left .list .selected {
  background-color: rgb(46, 54, 65);
}

.main .left .list li .message-box {
  flex-grow: 1;
  /* 让文字部分占据剩余空间 */
}

/* 会话列表 */
.main .left .list li h3,
.main .left .list li p {
  height: 20px;
  font-size: 14px;
  line-height: 20px;
}

/* 好友列表 */
.main .left .list li h4 {
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  margin-left: 10px;
  /* 调整头像与名称之间的间距 */
}

.main .left .list li .avatar {
  width: 40px;
  /* 设置头像宽度 */
  height: 40px;
  /* 设置头像高度 */
  border-radius: 50%;
  /* 使头像呈圆形，可根据需求调整 */
}

.hide {
  display: none;
}

::-webkit-scrollbar {
  display: none;
}

.main .right .title {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.main .right .message-show {
  height: 550px;

  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;

  overflow: auto;
}

.main .right .message-show .message {
  margin-top: 10px;
  display: flex;
  align-items: center;
  /* 使头像和消息框垂直居中 */
}

.main .right .message-show .message-left {
  /* 元素靠左 */
  justify-content: flex-start;
}

.main .right .message-show .message-right {
  /* 元素靠右 */
  justify-content: flex-end;

}

.main .right .message-show .message .avatar {
  width: 40px;
  /* 设置头像宽度 */
  height: 40px;
  /* 设置头像高度 */
  border-radius: 50%;
  /* 使头像呈圆形 */
  margin-right: 10px;
  /* 头像与消息框之间的间距（对于左侧消息） */
  margin-left: 10px;
  /* 头像与消息框之间的间距（对于右侧消息） */
}

.main .right .message-show .message .box {
  max-width: 500px;
}

.main .right .message-show .message .box h4 {
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
}

.main .right .message-show .message .box p {
  padding: 20px;
  border-radius: 10px;
  word-wrap: break-word;
  /* 强制文字换行 */
  width: fit-content;
  /* 让盒子宽度适应内容 */
}

/* 左侧消息设置背景色 */
.main .right .message-show .message-left .box p {
  background-color: #fff;
}

/* 右侧消息设置背景色 */
.main .right .message-show .message-right .box p {
  background-color: darkseagreen;
}

.main .right .message-input {
  /* 块级元素 要转换为 行内元素 方便设计尺寸 */
  display: block;
  width: 100px;
  height: 100px;
  border: none;
  outline: none;

  margin-top: 2px;
  background-color: rgb(238, 238, 238);
  padding: 10px;
  resize: none;
}

.main .right .ctrl {
  height: 35px;
  display: flex;
  justify-content: flex-end;
}

.main .right .ctrl button {
  height: 35px;
  width: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.main .right .ctrl button:active {
  background-color: grey;
  color: white;
}

/* 构造好友列表 */
.message-addFriend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 20px;
}

.main>.right>.message-show>.message-addFriend>span {
  height: 50px;
  width: 40%;
  text-align: center;
  line-height: 50px;
  /* 根据实际高度调整 */
}

.main>.right>.message-show>.message-addFriend>input {
  height: 50px;
  width: 100%;
}

.main>.right>.message-show>.message-addFriend>button {
  /* padding-left: 40px; */
  margin-left: 200px;
  height: 50px;
  width: 20%;
}

/* 构造添加好友请求的样式 */
#session-list>li>.row {
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-left: 70px;
}

#session-list>li>.row>button {
  height: 30px;
  width: 60px;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  outline: none;
  border: none;
  background-color: grey;
  color: white;
  border-radius: 3px;
}

#session-list>li>.row>button:hover {
  background-color: #0056b3;
}

.right .message-show .message-addFriend .avatar {
  width: 40px;
  height: 40px;
  margin-right: 8px;
  background-color: #eee;
  object-fit: cover;
}